<template>
    <div class="MoveCareer">
        <TopBar class="t" :title="'运动生涯'" :url="'/index/my'"></TopBar>
        <div class="content">
            <div class="card">
                <div ref="card">
                    <div>
                        <h2>OMINI.BASS</h2>
                        <p>已运动 <i>233</i>天</p>
                    </div>
                    <div>
                        <p>总运动</p>
                        <h2><i>987</i><span>分钟</span></h2>
                    </div>
                    <div>
                        <div>
                            <p>累计消耗</p>
                            <div><i>5986</i><span>Kcal</span></div>
                        </div>
                        <div>
                            <p>连续运动</p>
                            <div><i>123</i><span>天</span></div>
                        </div>
                    </div>
                    <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
                </div>
            </div>
            <h3>本月运动情况</h3>
            <div class="state">
                <div ref="slide">
                    <div>
                        <img src="~@/assets/img/my/two-f.png" alt="">
                        <div class="text">
                            <h3>50263</h3>
                            <div>
                                步数
                            </div>
                            <p>9月份完成</p>
                        </div>
                    </div>
                    <div>
                        <img src="~@/assets/img/my/fire.png" alt="">
                        <div class="text">
                            <h3>259</h3>
                            <div>
                                千卡
                            </div>
                            <p>9月份消耗</p>
                        </div>
                    </div>
                    <div>
                        <img src="~@/assets/img/my/green.png" alt="">
                        <div class="text">
                            <h3>365</h3>
                            <div>
                                分钟
                            </div>
                            <p>9月份运动</p>
                        </div>
                    </div>
                </div>
            </div>
            <h3>体质情况</h3>
            <div class="health-wrap">
                <div class="health">
                    <div>
                        <div>
                            <img src="~@/assets/img/my/path1.png" alt="">
                            <section class="tz">体脂率 <span>17.5</span> <i>⬆</i></section>
                        </div>
                        <div>
                            <img src="~@/assets/img/my/path2.png" alt="">
                            <section class="weight">体重 <span>75kg</span> <i>⬇</i></section>
                        </div>
                        <div>
                            <img class="pic-3" src="~@/assets/img/my/path3.png" alt="">
                            <section class="water">水含量 <span>58%</span> <i>⬆</i></section>
                        </div>
                    </div>
                    <p>
                        体重偏低，需要加强力量型训练并增加饮食摄入量，控制饮食结构。</p>
                </div>
            </div>
            <h3>运动情况</h3>
            <div class="footer-wrap">
                <div class="footer">
                    <div class="line">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>

                    <section>
                        <span>02</span>
                        <span>03</span>
                        <span>04</span>
                        <span>05</span>
                        <span>06</span>
                        <span>07</span>
                        <span>08</span>
                        <span>09</span>
                        <span>10</span>
                        <span>11</span>
                        <span>12</span>
                        <span>13</span>
                        <span>14</span>
                        <span>19</span>
                    </section>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import TopBar from "../../../component/TopBar";

    export default {
        name: "Order",
        data() {
            return {
                canvasWidth: 0,
                canvasHeight: 0,
            }
        },
        components: {
            TopBar
        },
        created() {
            let w = document.documentElement.clientWidth
            let h = document.documentElement.clientHeight
            this.canvasWidth = 0.724 * w
            this.canvasHeight = 0.36 * h
        },
        mounted() {
            let w = document.documentElement.clientWidth
            let h = document.documentElement.clientHeight
            let canvas = this.$refs.canvas
            let ctx = canvas.getContext('2d')

            ctx.beginPath()
            ctx.arc(0.72 * w, 0.246 * w, 0.181 * w, Math.PI * .5, Math.PI * 1.2, false)
            ctx.fillStyle = '#ffffff'
            ctx.lineWidth = 0.067 * w
            ctx.strokeStyle = '#6B5CEB'
            ctx.fill()
            ctx.stroke()

            ctx.beginPath()
            ctx.arc(0.72 * w, 0.246 * w, 0.181 * w, Math.PI * 1.2, Math.PI * 1.5, false)
            ctx.fillStyle = '#ffffff'
            ctx.lineWidth = 0.067 * w
            ctx.strokeStyle = '#F5F6FA'
            ctx.fill()
            ctx.stroke()

            ctx.font = ` normal 600 ${0.0416 * w}px  微软雅黑 `
            ctx.fillStyle = 'black'
            ctx.rotate(Math.PI * -0.5)
            ctx.fillText('本月目标', -0.338 * w, 0.65 * w)
            ctx.fillText('75%', -0.286 * w, 0.709 * w)


            let item = this.$refs.slide
            item.addEventListener('touchstart', mouseHandler)
            let offset = 0,itemLeft='0px'

            function mouseHandler(e) {
                if (e.type === 'touchstart') {
                    e.preventDefault()
                    document.addEventListener('touchend', mouseHandler)
                    document.addEventListener('touchmove', mouseHandler)
                    offset = e.changedTouches[0].clientX
                    document.div = this
                } else if (e.type === 'touchmove') {
                    this.div.style.left =e.changedTouches[0].clientX - offset + 'px'
                    parseInt(this.div.style.left) < -122 && (this.div.style.left = '-120px')
                    parseInt(this.div.style.left) > 0 && (this.div.style.left = '0px')
                } else {
                    document.removeEventListener('touchend', mouseHandler)
                    document.removeEventListener('touchmove', mouseHandler)
                }
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import "../../../assets/stylus/border.styl"
    .MoveCareer
        overflow-x hidden
        .t
            padding 0.15rem 0 0.4rem 0.15rem

        .content
            padding 0.15rem 0 0 0.16rem
            height 100vh
            position relative
            background-color #F5F6FA

            .health-wrap
                padding-right 0.12rem

            .footer-wrap
                padding-right 0.12rem

            .footer
                padding 0.15rem 0.1rem 0.08rem 0.1rem
                height 1.25rem
                background-color #ffffff
                border-radius 3%
                box-shadow 0.03rem 0.1rem 0.15rem rgba(0, 0, 0, .15);

                .line
                  display flex
                  > div
                      border-left 0.01rem dashed #cccccc
                      height 0.85rem
                      width 0.23rem
                      margin 0 0 0.03rem 0.08rem
                section
                    height 0.15rem
                    font-size 0.12rem
                    font-weight 600

                    span
                      padding-right 0.086rem

            .health
                padding 0.28rem 0.2rem 0.2rem 0.2rem
                border-radius 3%
                height 1.5rem
                background-color #ffffff
                box-shadow 0.03rem 0.1rem 0.15rem rgba(0, 0, 0, .15);

                .pic-3
                    margin -0.1rem 0 0 0.1rem

                .tz
                    margin-top .14rem

                    i
                        color red

                .weight
                    margin-top 0.17rem

                    i
                        color lightgreen

                .water
                    margin-top 0.2rem

                    i
                        color lightgreen

                > div
                    display flex
                    justify-content space-around
                    margin-bottom 0.1rem

                    section
                        font-size 0.12rem
                        margin-top 0.1rem

                p
                    color #cccccc
                    font-size 0.12rem

            .state
                height 1.1rem
                position relative

                > div
                    position absolute
                    width 135%
                    height 1rem
                    display flex

                    > div
                        padding 0.2rem 0.18rem 0.1rem 0.18rem
                        background-color #ffffff
                        border-radius 8%
                        margin-right 0.1rem
                        width 30%
                        height 1rem
                        box-shadow 0 0.1rem 0.15rem rgba(0, 0, 0, .15);

                        .text
                            transform translate(0.4rem, -0.22rem)

                            h3
                                font-size 0.17rem

                            div
                                font-size 0.13rem

                            p
                                color #cccccc
                                font-size 0.12rem

            h3
                margin 0.08rem 0 0.02rem 0
                font-size 0.14rem

            canvas
                position absolute
                top 0.16rem
                right 0

            .card
                display flex
                justify-content flex-end

                > div
                    padding 0.15rem 0 0 0.25rem
                    width 3.1rem
                    height 1.85rem
                    background-color #ffffff
                    border-bottom-left-radius 8%
                    border-top-left-radius 8%
                    box-shadow 0 0.1rem 0.15rem rgba(0, 0, 0, .15);

                    > div:nth-child(1)
                        h2
                            font-size 0.2rem

                        p
                            font-size 0.12rem
                            color #cccccc
                            margin-top -0.03rem

                    > div:nth-child(2)
                        margin-top 0.16rem

                        p
                            font-size 0.12rem

                        h2
                            i
                                font-size 0.21rem
                                padding-right 0.07rem

                            span
                                color #cccccc
                                font-size 0.12rem
                                font-weight 300

                    > div:nth-child(3)
                        margin-top 0.08rem
                        display flex

                        > div:nth-child(1)
                            padding-right 0.2rem

                        p
                            font-size 0.12rem

                        i
                            font-weight 600
                            font-size 0.14rem
                            padding-right 0.06rem

                        span
                            color #cccccc
                            font-size 0.12rem


</style>